<template>
	<view class="dmm-container dmm-container-grey">
		<u-search placeholder="搜索" height="72" margin="0 30rpx 20rpx" bgColor="#fff" placeholderColor="#d7d7d7" shape="square" v-model="search" :showAction="false" @search="getList({search, deviceType: deviceType.id})"></u-search>
		
		<view class="section summary">
		  <cl-device-types @select="onSelectDeviceType"></cl-device-types>
			
			<view class="row data">
				<view class="">
					<text class="text-content">已入库：</text>
					<text class="text">{{total}}</text>
				</view>
				<view class="">
					<text class="text-content">已装机：</text>
					<text class="text">{{installedNum}}</text>
				</view>
			</view>
		</view>
		
		<view class="section list">
		  <u-cell-group :border="false">
				<u-cell v-for="(item, index) in list" @click="gotoDetail(index)" :key="index" :title="deviceType.name" >
					<view slot="label" class="u-cell__label">
						<text class="text text-tip">{{item.deviceSn}}</text>
						<text class="tag">{{deviceStatusEnum[item.deviceStatus]}}</text>
						<text v-if="item.merName" class="name text text-tip">{{item.merName}}</text>
					</view>
				</u-cell>
			</u-cell-group>
			
		</view>
		
		<view class="tip" v-if="!hasData">
			<text class="text text-tip">- {{list.length ? '没有数据了' : '暂无数据'}} -</text>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from "vuex"
	import {deviceStatusEnum, deviceTypeList} from '@/common/constants';
	import {uniHistory} from '@/common/utils.js'
	
	export default {
		data() {
			return {
				deviceStatusEnum,
				search: '',
				deviceType: {name: '台卡', id: '00'},
				showTypes: false,
				deviceTypeList,
			};
		},
		
		computed: {
			...mapState('deviceManage', ['list', 'pageNum', 'hasData', 'total', 'installedNum']),

		},
		
		methods: {
			...mapMutations('deviceManage', ['save']),
			...mapActions('deviceManage', ['getList', 'getStatistics']),
			onSelectDeviceType(deviceType) {
				this.deviceType = deviceType
				
				this.getStatistics(deviceType.id)
				this.getList({deviceType: deviceType.id});
			},
			
			gotoDetail(index) {
				this.save({field: 'detail', payload: this.list[index]})
				uniHistory.push('/pages/deviceManage/detail')
			}
		},
		
		onShow() {
			this.getStatistics(this.deviceType.id)
			this.getList({deviceType: this.deviceType.id});
		},
		
		onReachBottom() {
			if (this.hasData) this.getList({pageNum: this.pageNum + 1, deviceType: this.deviceType.id, search: this.search})
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	
	.section {
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
	}
	.list {
		.u-cell {	
			/deep/ .u-cell__body {
				padding: 35rpx 0;
				
				.u-cell__title {
					.u-cell__title-text {
						font-size: 28rpx;
						font-weight: 700;
						color: $u-main-color;
						margin-bottom: 32rpx;
					}
					
					.u-cell__label {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						background-color: #fff;
						.tag {
							color: $u-tips-color;
							margin-left: 20rpx;
							margin-right: 20rpx;
							font-size: 24rpx;
							border-radius: 4rpx;
							background-color: $u-bg-color;
							height: 34rpx;
							line-height: 34rpx;
							width: 98rpx;
							text-align: center;
						}
					}
				}
			}
			
			/deep/ text {
				font-size: 28rpx;
			}
		}
	}
	
	.u-search {
		/deep/ .u-search__content {
			border-radius: 16rpx !important;
		}
	}
	
	.summary {
		padding: 40rpx 30rpx;
		
		.data {
			margin-top: 30rpx;
			> view {
				margin-right: 90rpx;
			}
			
			.text {
				font-weight: 700;
			}
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
